  <template>
  <div id="all">
    <div id="center">
      <el-container>
        <!--      <el-header>Header</el-header>-->
        <el-main>
          <!--    <h1>This is an house page</h1>-->
          <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>房源收藏</el-breadcrumb-item>
          </el-breadcrumb>



          <el-tabs type="border-card" style="margin-top: 25px">
            <el-tab-pane>
              <span slot="label"><i class="el-icon-school"></i> 房源收藏</span>
              <!--房源列表开始-->
              <el-row gutterValue=20>
                <el-col style="margin: 10px 0" span=8 v-for="p in tableData">
                  <el-card style="width: 350px ; height: 300px; position: relative">
                    <a href="/">
                      <img :src="p.majorImage" width="300px" height="212px">
                      <p style="font-size: 14px;height: 15px">{{ p.name }}</p>
                      <b style="color: red">￥{{ p.price }}元/月</b>
                    </a>
                      <el-button type="warning" icon="el-icon-star-off"
                                 style="position: absolute; right: 20px;bottom: 20px;"
                                 size="mini" circle @click="handleCancelCollection(p)"></el-button>
                  </el-card>

                </el-col>
              </el-row>
              <!--房源列表结束-->
            </el-tab-pane>
          </el-tabs>

          <div style="text-align: right; margin: 10px auto;">
            <el-pagination
                @current-change="changePage"
                layout="total, prev, pager, next"
                :total="total"
                :current-page="currentPage"
                :page-size="pageSize">
            </el-pagination>
          </div>
        </el-main>
        <!--      <el-footer>Footer</el-footer>-->
      </el-container>
    </div>


  </div>
</template>


<script>
export default {
  props: {
    gutterValue: {
      type: [Number, String],
      default: 0,
      validator(value) {
        if (typeof value === 'string') {
          return !isNaN(parseFloat(value)) && isFinite(value)
        } else {
          return typeof value === 'number'
        }
      },
    },
    spanValue: {
      type: [Number, String],
      default: 0,
      validator(value) {
        if (typeof value === 'string') {
          return !isNaN(parseFloat(value)) && isFinite(value)
        } else {
          return typeof value === 'number'
        }
      },
    },
  },
  data() {
    return {
      tableData:[],
      sectionList: [],
      radioValue: 1,
      src: "https://inews.gtimg.com/newsapp_bt/0/13005900645/1000",
      params: {
        price: '',
        area: '',
        floor: '',
        hasElevator: '',
        recom: '',
        sectionId: '',
        leaseTime: '',
        leaseType: '',
        houseAge: ''
      },
      input1: '',
      houseArr: [
        {title: "桥西区优惠房源|特价", price: 750, url: "imgs/house01.jpg", local: ""},
        {title: "桥东区优惠房源|特价", price: 650, url: "imgs/house02.jpg", local: ""},
        {title: "河西区优惠房源|特价", price: 850, url: "imgs/house03.jpg", local: ""},
        {title: "桥西区优惠房源|特价", price: 950, url: "imgs/house04.jpg", local: ""},
        {title: "金牛区优惠房源|特价", price: 150, url: "imgs/house05.jpg", local: ""},
        {title: "金牛区优惠房源|特价", price: 250, url: "imgs/house06.jpg", local: ""},
        {title: "金牛区优惠房源|特价", price: 350, url: "imgs/house07.jpg", local: ""},
        {title: "桥西区优惠房源|特价", price: 450, url: "imgs/house08.jpg", local: ""},
        {title: "桥西区优惠房源|特价", price: 550, url: "imgs/house09.jpg", local: ""},
      ],
      houseArr2: [
        {title: "桥西区优惠房源|特价", price: 650, url: "imgs/house02.jpg", local: ""},
        {title: "桥西区优惠房源|特价", price: 950, url: "imgs/house04.jpg", local: ""},
        {title: "桥西区优惠房源|特价", price: 250, url: "imgs/house06.jpg", local: ""},
      ],
      total: 0,
      pageSize: 0,
      currentPage: 1,
    }
  },
  methods: {
    handleCancelCollection(house) {
      this.$confirm('此操作将取消收藏【' + house.id + '-' + house.name + '】房源，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDelete(house);
      }).catch(() => {
      });
    },
    handleDelete(house) {
      let url = 'http://localhost:9200/user/delete-house-collection';

      let formData = 'houseId=' + house.id;

      this.axios.post(url, formData).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            message: '取消收藏成功！',
            type: 'success'
          });
          this.loadHouseList();
        } else if (jsonResult.state == 40400) {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadHouseList();
            }
          });
        } else if (jsonResult.state == 40900) {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    // handleRadioChange() {
    //   console.log(this.params.sectionId)
    // },
    // 切换分页
    changePage(page) {
      this.$router.replace('?page=' + page);
      this.load();
    },
    // 加载房源列表
    loadHouseList() {
      let page = this.$router.currentRoute.query.page;
      if (!page) {
        page = 1;
      }

      console.log(page,'page');

      let url = 'http://localhost:9200/user/houseListByUserId?page='+ page;
      console.log('url = ' + url);
      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.tableData = jsonResult.data.list;
          console.log(this.tableData,'房源');
          this.currentPage = jsonResult.data.currentPage;
          this.pageSize = jsonResult.data.pageSize;
          this.pageCount = jsonResult.data.maxPage;
          this.total = jsonResult.data.total;
        }
      });
    },
    // loadHouseStandard() {
    //   this.ruleForm.id = this.$router.currentRoute.query.houseId;
    //   let url = 'http://localhost:9200/house/standard/second-hand-house?id=' + this.ruleForm.id;
    //   // + this.ruleForm.id;
    //   console.log(url);
    //   this.axios.get(url).then((response) => {
    //     let jsonResult = response.data;
    //
    //     if (jsonResult.state == 20000) {
    //       this.ruleForm = jsonResult.data;
    //       this.majorUrl = this.ruleForm.majorImage;
    //       this.loadOrientationStandard();
    //       this.loadAgentStandard();
    //       this.loadSectionStandard();
    //       // this.images = this.ruleForm.houseImage.split(",");
    //     } else {
    //       this.$alert(jsonResult.message, '错误', {
    //         confirmButtonText: '确定',
    //         callback: action => {
    //         }
    //       });
    //     }
    //   });
    // },

  },
  mounted() {
    this.loadHouseList();
  }
}
</script>


<style>
.el-radio-button__inner, .el-radio-group {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  float: left;
  display: block;
  margin-top: 13px;
}

#all {
  width: 100%;
  background-color: #f4f4f4;
  background-image: url('../../public/imgs/filter_wrap_bg.jpg');
  background-repeat: no-repeat;
  background-size: 100%;
}


#center {
  width: 1120px;
  margin: 0 auto;
}

p {
  height: 10px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 30px;
}

/*body > .el-container {*/
/*  margin-bottom: 40px;*/
/*}*/


.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

li {
  list-style-type: none;
}

.el-main a {
  color: #666666;
  text-decoration: none;
}

.el-menu.el-menu--horizontal {
  border: 0;
}

.el-table .el-table__cell {
  padding: 0;
}

.filter-row .filter-tag-box a.active {
  background-color: #41cbc0;
  color: #fff;
  padding: 0 5px;
}

.filter-row .filter-tag-box a {
  color: #555;
  display: inline-block;
  margin-right: 15px;
}

a, a:visited {
  text-decoration: none;
  border-width: 0;
}

body, input {
  font-family: Helvetica Neue, Helvetica, Hiragino Sans GB, Microsoft YaHei, Arial, STHeiti, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
}

</style>